<div class="btn-group">
    <button id="refresh" class="btn btn-primary">刷新</button>
    <button id="act-status" class="btn btn-success">当前状态</button>
    <button id="act-clear" class="btn btn-warning">清空规则</button>
    <button id="act-apply" class="btn btn-danger">应用更改</button>
</div>
<div id="firewall-root"></div>
<p>&nbsp;</p>
<div class="panel panel-default">
    <div class="panel-heading">
        入口规则
        <button id="act-input" class="btn btn-info">新建</button>
    </div>
    <table class="table table-hover">
        <thead>
        <tr>
            <td>ID</td>
            <td>名称</td>
            <td>端口</td>
            <td>协议</td>
            <td>操作</td>
        </tr>
        </thead>
        <tbody>
        {% for i in inputs %}
        <tr>
            <td>{{i.id}}</td>
            <td>{{i.name}}</td>
            <td>{{i.port}}</td>
            <td>{{i.protocol}}</td>
            <td>
                <div class="btn-group btn-group-sm">
                    <button id="item-input-{{i.id}}-EDIT" class="btn btn-warning">
                        编辑
                    </button>
                    <button id="item-input-{{i.id}}-DELETE" class="btn btn-danger">
                        删除
                    </button>
                </div>
            </td>
        </tr>
        {% end %}
        </tbody>
    </table>
</div>
<div class="panel panel-default">
    <div class="panel-heading">
        出口规则
        <button id="act-output" class="btn btn-info">新建</button>
    </div>
    <table class="table table-hover">
        <thead>
        <tr>
            <td>ID</td>
            <td>名称</td>
            <td>关键字</td>
            <td>工作时间</td>
            <td>操作</td>
        </tr>
        </thead>
        <tbody>
        {% for i in outputs %}
        <tr>
            <td>{{i.id}}</td>
            <td>{{i.name}}</td>
            <td>{{i.keyword}}</td>
            <td>{{i.weekdays_cn()}}</td>
            <td>
                <div class="btn-group btn-group-sm">
                    <button id="item-output-{{i.id}}-EDIT" class="btn btn-warning">
                        编辑
                    </button>
                    <button id="item-output-{{i.id}}-DELETE" class="btn btn-danger">
                        删除
                    </button>
                </div>
            </td>
        </tr>
        {% end %}
        </tbody>
    </table>
</div>
<div class="panel panel-default">
    <div class="panel-heading">
        映射规则
        <button id="act-nat" class="btn btn-info">新建</button>
    </div>
    <table class="table table-hover">
        <thead>
        <tr>
            <td>ID</td>
            <td>名称</td>
            <td>来源端口</td>
            <td>协议</td>
            <td>目的IP</td>
            <td>目的端口</td>
            <td>操作</td>
        </tr>
        </thead>
        <tbody>
        {% for i in nats %}
        <tr>
            <td>{{i.id}}</td>
            <td>{{i.name}}</td>
            <td>{{i.sport}}</td>
            <td>{{i.protocol}}</td>
            <td>{{net}}.{{i.dip}}</td>
            <td>{{i.dport}}</td>
            <td>
                <div class="btn-group btn-group-sm">
                    <button id="item-nat-{{i.id}}-EDIT" class="btn btn-warning">
                        编辑
                    </button>
                    <button id="item-nat-{{i.id}}-DELETE" class="btn btn-danger">
                        删除
                    </button>
                </div>
            </td>
        </tr>
        {% end %}
        </tbody>
    </table>
</div>
<ul>
    <li>清空防火墙规则只清空路由器规则，并不清空数据库。</li>
    <li>出口规则默认对所有用户组生效</li>
</ul>
<script type="text/javascript">
    $(document).ready(function () {
        $("button#refresh").click(function () {
            new Ajax("tab-item-firewall", "/itpkg/{{rid}}/firewall");
        });

        $("button[id^='act-']").click(function () {
            var act = $(this).attr("id").split('-')[1];
            if (act == "output" || act == "input" || act == "nat") {
                new Ajax("firewall-root", "/itpkg/{{rid}}/" + act + "/");
            }
            else if (act == "status" ||
                    ((act == "apply" || act == "clear") && confirm("你确定要进行此操作么？"))) {
                new Ajax("firewall-root", "/itpkg/{{rid}}/firewall", "PUT", {act: act}, undefined, false);
            }
        });

        $("button[id^='item-']").click(function () {
            var ss = $(this).attr('id').split('-');
            var url = "/itpkg/{{rid}}/" + ss[1] + "/" + ss[2];
            if (ss[3] == 'EDIT') {
                new Ajax("firewall-root", url);
            }
            else if (ss[3] == 'DELETE') {
                if (confirm("你确定要删除该项么？")) {
                    new Ajax("firewall-root", url, "DELETE");
                }
            }
        });


    });
</script>